import {
  QuestionCircleOutlined,
  FormOutlined,
} from "@ant-design/icons";
import { PageContainer } from "@ant-design/pro-components";
import { Button, Space, message } from "antd";
import "./index.css";
import GroupList from "./GroupList";
import React, { useState } from "react";
import { AllContextProvider } from "@src/Common/AllContext";

const ACServer: React.FC = () => {
  const [tabName, setTabName] = useState<string>('AP分组');
  const [tabKey, setTabKey] = useState<string>('ap');
  const [isReload, setIsReload] = useState<boolean>(false);
  const [messageApi, contextHolder] = message.useMessage();

  const setReload = (v: boolean) => {
    setIsReload(v);
  }

  const handleSetTabNmae = (setTabName: any, name: string) => {
    setTabName(name);
    setIsReload(true);

  };

  const handOnTabChange = (e: string, setTabKey: any) => {
    setTabKey(e);
  }

  return (
    <div
      style={{
        background: "#ffffff",
      }}
    >
      <PageContainer
        onTabChange={(e) => handOnTabChange(e, setTabKey)}
        header={{
          title: <span className="PageTitle">设备管理</span>,
          ghost: true,
        }}
        tabBarExtraContent=<Space>
          <a
            className="ExtraSpaceContent"
            href="https://l02t4noq5kz.feishu.cn/docx/Zwv0dbJzFoWy8qxejSScJhN9nde?from=from_copylink"
            target="_blank"
          >
            使用帮助
            <QuestionCircleOutlined />
          </a>
          <a
            className="ExtraSpaceContent"
            href="https://bbs.hiswi.cn"
            target="_blank"
          >
            论坛反馈
            <FormOutlined />
          </a>
        </Space>
        tabList={[
          {
            tab: (
              <Button
                key="AddDev"
                type="primary"
                size="small"
                className="GeneralButton"
                onClick={() => handleSetTabNmae(setTabName, 'AP分组')}
              >
                AP管理
              </Button>
            ),
            key: "ap",
            closable: false,
          },
          {
            tab: (
              <Button
                key="AddDev"
                type="primary"
                size="small"
                className="GeneralButton"
                onClick={() => handleSetTabNmae(setTabName, '路由分组')}
              >
                路由管理
              </Button>
            ),
            key: "router",
          },
          {
            tab: (
              <Button
                key="GroupMan"
                type="primary"
                size="small"
                className="GeneralButton"
                onClick={() => handleSetTabNmae(setTabName, '分组管理')}
              >
                分组管理
              </Button>
            ),
            key: "group",
          },
          {
            tab: (
              <Button
                key="ServerSetting"
                type="primary"
                size="small"
                className="GeneralButton"
                onClick={() => handleSetTabNmae(setTabName, '服务设置')}
              >
                服务设置
              </Button>
            ),
            key: "server",
          },
        ]}
      >
        <AllContextProvider value={{
          tabName: tabName,
          tabKey: tabKey,
          isReload: isReload,
          setIsReload: setReload,
          title: tabName,
          devType: tabKey,
          messageApi: messageApi
        }}>
          {contextHolder}
          <GroupList />
        </AllContextProvider>

      </PageContainer>
    </div>
  );
}

export default ACServer;